<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>ColumNav example: breadcrumbs</title>
    <script type="text/javascript" src="../js/yui//utilities.js"></script>
    <script type="text/javascript" src="../js/yui/container_core-min.js"></script>
    <script type="text/javascript" src="../js/carousel_min.js"></script>
    <script type="text/javascript" src="../js/columnav_min.js"></script>
    <link href="../css/examples.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
    <!--
      try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {}
      function addBreadcrumb(type, args, me) {
          var paneIndex = args[0];
          var pane = me.carousel.getItem(paneIndex); // see carousel documentation
                                                     // for its API
          var div = pane.getElementsByTagName('div')[0];
          var title = div.getAttribute('title');
          if (title) {
              var breadcrumbs = document.getElementById('breadcrumbs');
              if (me.carousel.cfg.getProperty('numVisible') > 1) {
                  var spans = breadcrumbs.getElementsByTagName('span');
                  if (spans.length >= paneIndex) {
                      numToRemove = (spans.length - paneIndex) + 1;
                      for (var i = 0; i < numToRemove; i++) {
                          removeBreadcrumb();
                      }
                  }
              }
              var span = document.createElement('span');
              var sep = arguments.callee.calledOnce ? ' / ' : '';
              span.appendChild(document.createTextNode(sep + title));
              breadcrumbs.appendChild(span);
          }
          arguments.callee.calledOnce = true;
      }
      function removeBreadcrumb(args, type, me) {
          var breadcrumbs = document.getElementById('breadcrumbs');
          if (breadcrumbs.getElementsByTagName('span').length > 1) {
              breadcrumbs.removeChild(breadcrumbs.lastChild);
          }
      }
      function init() {
          var cn_cfg = {
              prevElement: 'columnav-prev',
              datasource: document.getElementById('basketball-list'),
              paneHandler: addBreadcrumb,
              prevHandler: removeBreadcrumb,
              numVisible: 1 // if > 1, addBreadcrumb needs to be aware of which pane was clicked
          };
          var cn = new YAHOO.extension.ColumNav('columnav', cn_cfg);

          var sv_cfg = { url: location.href, modifier: 'HTML' };
          var sv = new YAHOO.extension.SourceViewer('source', sv_cfg);
      }
      YAHOO.util.Event.addListener(window, 'load', init);
    // -->
    </script>
    <script type="text/javascript" src="../js/viewsource.js"></script>
    <link href="../css/stringify.css" rel="stylesheet" type="text/css"/>
    <style type="text/css">
      div#breadcrumbs { font-size: 12px; }
    </style>
  </head>
  <body>
    <div id="main">
      <div id="content">
        <p style="float:right"><a href="../index.html">Documentation</a></p>
        <h1>ColumNav</h1>
        <h2>Example</h2>
        <div class="prevButton">
          <a href="javascript:void(0)" id="columnav-prev">&lt; back</a>
        </div>
        <div id="breadcrumbs"></div>
        <div id="columnav" class="carousel-component">
          <div class="carousel-clip-region">
            <ul class="carousel-list"></ul>
          </div>
        </div>
        <div class="viewsource" id="source"></div>
        <p>This example demonstrates how to provide a "breadcrumb trail" to give users a sense of where they are in the menu hierarchy. Two event handlers are employed: <code>paneHandler</code> to add a breadcrumb, and <code>prevHandler</code> to remove one. The <code>paneHandler</code> function takes advantage of the <code>title</code> attribute propagated from the current list in the datasource. Recall that each <code>&lt;ul&gt;</code> in the datasource can have a <code>title</code> attribute containing arbitrary text. This attribute is copied to the <code>&lt;div&gt;</code> element surrounding the menu items within the corresponding pane in the ColumNav. In this example, the <code>paneHandler</code> function reads this attribute value, and uses it to create a breadcrumb. The <code>prevHandler</code> function simply removes the last breadcrumb.</p>
        <ul id="basketball-list" title="Basketball Teams">
          <li>
            <a href="http://sports.yahoo.com/nba/">NBA</a>
            <ul title="NBA">
              <li>
                <a href="">Atlantic</a>
                <ul title="Atlantic">
                  <li><a href="http://sports.yahoo.com/nba/teams/bos">Boston Celtics</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/njn">New Jersey Nets</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/nyk">New York Knicks</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/phi">Philadelphia 76ers</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/tor">Toronto Raptors</a></li>
                </ul>
              </li>
              <li>
                <a href="">Central</a>
                <ul title="Central">
                  <li><a href="http://sports.yahoo.com/nba/teams/chi">Chicago Bulls</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/cle">Cleveland Cavaliers</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/det">Detroit Pistons</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/ind">Indiana Pacers</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/mil">Milwaukee Bucks</a></li>
                </ul>
              </li>
              <li>
                <a href="">Southeast</a>
                <ul title="Southeast">
                  <li><a href="http://sports.yahoo.com/nba/teams/atl">Atlanta Hawks</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/cha">Charlotte Bobcats</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/mia">Miami Heat</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/orl">Orlando Magic</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/was">Washington Wizards</a></li>
                </ul>
              </li>
              <li>
                <a href="">Southwest</a>
                <ul title="Southwest">
                  <li><a href="http://sports.yahoo.com/nba/teams/dal">Dallas Mavericks</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/hou">Houston Rockets</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/mem">Memphis Grizzlies</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/nor">New Orleans/OklaCity Hornets</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/sas">San Antonio Spurs</a></li>
                </ul>
              </li>
              <li>
                <a href="">Northwest</a>
                <ul title="Northwest">
                  <li><a href="http://sports.yahoo.com/nba/teams/den">Denver Nuggets</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/min">Minnesota Timberwolves</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/por">Portland Trail Blazers</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/sea">Seattle SuperSonics</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/uth">Utah Jazz</a></li>
                </ul>
              </li>
              <li>
                <a href="">Pacific</a>
                <ul title="Pacific">
                  <li><a href="http://sports.yahoo.com/nba/teams/gsw">Golden State Warriors</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/lac">Los Angeles Clippers</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/lal">Los Angeles Lakers</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/pho">Phoenix Suns</a></li>
                  <li><a href="http://sports.yahoo.com/nba/teams/sac">Sacramento Kings</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>
